<template>
  <el-button type="text" round size="mini" :disabled="disabled || time > 0" @click.stop="run">{{ text }} </el-button>
</template>

<script>
export default {
  name: 'SendCode',
  props: {
    second: {
      type: Number,
      default: 30
    }
  },
  data() {
    return {
      time: 0,
      disabled: false
    }
  },
  computed: {
    text: function () {
      return this.time > 0 ? this.time + 's后重新发送' : '获取验证码'
    }
  },
  methods: {
    run: function () {
      this.$emit('run')
    },
    start: function () {
      this.time = this.second
      this.timer()
      this.disabled = true
    },
    stop: function () {
      this.time = 0
      this.disabled = false
    },
    timer: function () {
      if (this.time > 0) {
        this.time--
        setTimeout(this.timer, 1000)
      } else {
        this.disabled = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-button {
  position: absolute;
  right: 10px;
}
</style>
